<template>
  <div class="home">
    <el-row
      v-for="(item, index) in shopItemList"
      :key="index"
      style="margin-top: 40px"
    >
      <el-col
        :span="5"
        v-for="(o, index) in item"
        :key="index"
        style="margin-left: 45px"
      >
        <el-card class="simCard" :body-style="{ padding: '0px' }">
          <div style="display: flex">
            <div style="height: 100%; width: 130px; text-align: center">
              <img :src="o.productThumb" class="image" />
            </div>
            <div class="product__info">
              <div class="title">
                <h1>{{ o.shopName }}</h1>
                <div class="box">
                  <div class="three-line">
                    <span>{{ o.shopIntroduce }}</span>
                  </div>
                </div>
              </div>
              <div class="price">
                RMB￥ <span>{{ o.marketPrice }}</span>
              </div>
              <el-button
                :disabled="o.disabled"
                class="buy--btn"
                @click="addToCart(o)"
              >
                ADD TO CART
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="params.pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-drawer
      title="购物车"
      :visible.sync="carShow"
      direction="rtl"
      size="40%"
    >
      <!--     <el-table :data="addItemList">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="shopName" label="商品" width="180">
        </el-table-column>
      <el-table-column prop="shopNums" label="数量" width="180">
          <template slot-scope="scope">
            <el-input-number
              style="width: 134px"
              v-model="scope.row.shopNums"
              @change="ChangeNums(scope.row)"
              :min="0"
              :max="10"
              label="描述文字"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="shopPrice" label="单价"> </el-table-column>
        <el-table-column prop="shopTotal" label="总价"> </el-table-column>
      </el-table> -->
      <vxe-table :align="allAlign" :data="addItemList" max-height="400">
        <vxe-column type="seq" width="60"></vxe-column>
        <vxe-column field="shopName" title="商品"></vxe-column>
        <vxe-column field="nums" title="数量">
          <template #default="{ row }">
            <el-input-number
              style="width: 134px"
              v-model="row.nums"
              @change="ChangeNums(row)"
              :min="1"
              :max="row.shopNums"
              label="描述文字"
            ></el-input-number>
          </template>
        </vxe-column>
        <vxe-column width="80" field="shopPrice" title="单价"></vxe-column>
        <vxe-column width="80" field="shopTotal" title="总价"></vxe-column>
        <vxe-column width="80" title="操作">
          <template #default="{ row }">
            <vxe-button type="text" @click="delItemCart(row)">删除</vxe-button>
          </template>
        </vxe-column>
      </vxe-table>
      <div
        style="
          position: absolute;
          bottom: 0%;
          width: 100%;
          background-color: #f3f6fb;
          height: 150px;
          padding: 20px;
        "
      >
        <div class="fontStyle">
          共<span>{{ allCnt }}</span
          >件
        </div>
        <div style="margin-top: 12px" class="fontStyle">
          居住地址:<span>{{ customer.customerAddress }}</span>
        </div>
        <div style="margin-top: 7px" class="fontStyle">
          电话号码:<span>{{ customer.customerPhone }}</span>
        </div>
        <div style="margin-top: 7px" class="fontStyle">
          邮编:<span>{{ customer.email }}</span>
        </div>
        <el-popconfirm title="请确认你的信息是否有误" @confirm="order()">
          <el-button
            class="buy--btn"
            style="position: absolute; right: 10%; bottom: 10%"
            slot="reference"
          >
            ORDER
          </el-button>
        </el-popconfirm>

        <div class="price" style="position: absolute; right: 10%; top: 0px">
          RMB￥ <span>{{ allPrice }}</span>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
      
      <script>
import request from "@/api/request";
import Cookies from "js-cookie";
import bus from "@/utils/bus.js";
export default {
  name: "StudentList",
  data() {
    return {
      customer: Cookies.get("customerInfo")
        ? JSON.parse(Cookies.get("customerInfo"))
        : {},
      Addform: {},
      pushOrders: [],
      customerId: "",
      allCnt: 0,
      allPrice: 0,
      isAddCart: false,
      allAlign: "center",
      addItemList: [],
      carShow: false,
      shopItemList: [],
      total: 0,
      params: {
        pageSize: 8,
        pageNum: 1,
        shopSrc: "",
      },
    };
  },
  created() {
    console.log(this.customer);
    this.getBland();
    this.load();
    bus.$on("share_id", (val) => {
      console.log(val);
      this.carShow = true;
    });
  },
  methods: {
    customerIdChange() {
      request.get("/customerInfo/" + this.customerId).then((res) => {
        this.$set(this.Addform, "customerAddress", res.data.customerAddress);
        this.Addform.customerId = res.data.customerId;
        this.Addform.customerName = res.data.customerName;
        this.Addform.customerPhone = res.data.customerPhone;
      });
    },
    order() {
      if (this.allPrice === 0) {
        this.$notify.warning("你尚未购买物品");
        return;
      }
      this.pushOrders = [];
      for (let i = 0; i < this.addItemList.length; i++) {
        let temp = {
          customerAddress: this.customer.customerAddress,
          customerId: this.customer.customerId,
          customerName: this.customer.customerName,
          customerPhone: this.customer.customerPhone,
          marketPrice: this.addItemList[i].shopPrice,
          email: this.customer.email,
          nums: this.addItemList[i].nums,
          ordersPrices: this.addItemList[i].shopTotal,
          shopId: this.addItemList[i].shopId,
        };
        this.pushOrders.push(temp);
      }
      console.log(this.pushOrders);
      request.post("/orders/save", this.pushOrders).then((res) => {
        if (res.code === "-1") {
          this.$notify.error(res.msg);
        } else if (res.code === "200") {
          this.$notify.success("下单成功");
          this.carShow=false;
          this.addItemList=[]
          this.load()
        }
        console.log(res);
      });
      // console.log(pushOrders);
    },
    delItemCart(row) {
      let id = row.id;
      this.shopItemList[Math.floor(id / 4)][id].disabled = false; //放开添加
      let newTemp = [];
      for (let i = 0; i < this.addItemList.length; i++) {
        if (this.addItemList[i].id !== id) {
          newTemp.push(this.addItemList[i]);
        }
      }
      this.addItemList = newTemp;
      console.log(this.addItemList);
      this.calAllPrice();
    },
    ChangeNums(value) {
      let id = value.id;
      value.shopTotal = value.shopPrice * value.nums;
      this.calAllPrice();
    },
    calAllPrice() {
      let temp = 0;
      let cnt = 0;
      this.addItemList.forEach((it) => {
        temp += parseInt(it.shopTotal);
        cnt += parseInt(it.nums);
      });
      this.allPrice = temp;
      this.allCnt = cnt;
    },
    addToCart(item) {
      let id = item.id;
      this.shopItemList[Math.floor(id / 4)][id].disabled = true;
      let temp = {
        id: item.id,
        shopName: item.shopName,
        nums: 1,
        shopId: item.shopId,
        shopPrice: item.marketPrice,
        shopTotal: item.marketPrice,
        shopNums: item.shopNums,
      };
      this.addItemList.push(temp);
      this.$notify.success("添加成功");
      this.calAllPrice();
    },
    transData(data) {
      let col = 4;
      let temp = [];
      let coTe = [];
      let cnt = 0;
      data.forEach((element) => {
        element.disabled = false;
        element.id = cnt++;
      });
      if (data.length <= 4) {
        coTe = data;
        temp.push(coTe);
      } else {
        for (let i = 0; i < data.length; i++) {
          if (i !== 0 && i % col === 0) {
            temp.push(coTe);
            coTe = [];
          }
          coTe.push(data[i]);
        }
      }

      this.shopItemList = temp;
    },
    getBland() {
      request.get("/customerInfo/distinct_customerId").then((res) => {
        this.customerIdList = res.data;
      });
      request.get("/shop/distinct_shopId").then((res) => {
        this.shopIdList = res.data;
      });
    },
    load() {
      request
        .get("/shop/page", {
          params: this.params,
        })
        .then((res) => {
          console.log(res);
          if (res.code === "200") {
            this.total = res.data.total;
            // let test = [
            //   ...res.data.list,
            //   ...res.data.list,
            //   ...res.data.list,
            //   ...res.data.list,
            //   ...res.data.list,
            // ];
            this.transData(res.data.list);
            console.log(this.total);
          }
        });
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum);
      this.params.pageNum = pageNum;
      this.load();
    },
  },
};
</script>
 

      <style lang="scss" scoped>
$color-primary: #4c4c4c;
$color-secondary: #a6a6a6;
$color-highlight: #ff3f40;

.simCard {
  width: 300px;
  height: 200px;
  padding: 15px;
}
.product__info {
  padding-left: 22px;
}
.title {
  h1 {
    margin-bottom: 0.1em;
    color: $color-primary;
    font-size: 1.5em;
    font-weight: 900;
  }

  span {
    font-size: 0.7em;
    color: $color-secondary;
  }
}
.price {
  // margin: 1.5em 0;
  color: $color-highlight;
  font-size: 1em;
  padding-top: 1em;

  span {
    padding-left: 0.15em;
    font-size: 2em;
  }
}
.three-line {
  font-size: 1em;

  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.image {
  // max-width: 100%; /* 让图片按比例缩放，不超过父元素宽度 */
  // max-height: 100%;
  // min-width: 80%;
  // min-height: 80%;
  width: 120px;

  display: inline-block;
}
.buy--btn {
  margin-top: 10px;
  padding: 1em 2.05em;
  border: none;
  border-radius: 7px;
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: 1.3px;
  color: #fff;
  background-color: $color-highlight;
  box-shadow: 2px 2px 25px -7px $color-primary;
  cursor: pointer;

  &:active {
    transform: scale(0.97);
  }
}
.block {
  position: absolute;
  left: 40%;
  bottom: 5%;
}
.fontStyle {
  color: #333436;
  font-family: "楷体";
  font-weight: 600;
  font-size: 20px;
  margin: 4px 4px 0 0;
}
</style>